Exercises

A List component

Let's suppose we're building a List component.

There are two types of lists in HTML: unordered lists (<ul>) and ordered lists (<ol>). Our List component should be able to render either.

Acceptance Criteria:

The consumer should be able to specify whether they want to render an ol or a ul, by passing a prop to List.
The component should restrict the user so that it can only render ul and ol (and not, for example, p or button).

Code Playground

import React from 'react';

import styles from './List.module.css';

function List({ className = '', children, ...delegated }) {

return (

<ul

{...delegated}

className={`${styles.wrapper} ${className}`}

{children}

</ul>

)

}

export default List;

Solution:

Solution code (success)

// List.js
import React from 'react';

import styles from './List.module.css';

const VALID_TAGS = ['ul', 'ol'];

function List({
  // ol | ul
  as: Tag = 'ul',
  className = '',
  children,
  ...delegated
}) {
  if (!VALID_TAGS.includes(Tag)) {
    throw new Error(
      `Unrecognized tag: ${Tag}. Expected: ${VALID_TAGS}`
    );
  }

  return (
    <Tag
      {...delegated}
      className={`${styles.wrapper} ${className}`}
    >
      {children}
    </Tag>
  );
}

export default List;

// App.js
import React from 'react';

import List from './List'

function App() {
  return (
    <main>
      <List>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </List>
      <List as="ol">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </List>
    </main>
  );
}

export default App;

In this solution, we use object destructuring to extract the as prop, and rename it to Tag. You can learn more about this syntax in the “Object Destructuring” reference lesson 👀.

A simpler approach? (info)

Several students have taken an alternative approach:

function List({
  ordered,
  className = '',
  children,
  ...delegated
}) {
  const Tag = ordered ? 'ol' : 'ul'

  return (
    <Tag
      {...delegated}
      className={`${styles.wrapper} ${className}`}
    >
      {children}
    </Tag>
  );
}

Instead of having an as prop that could be any string, the ordered prop is a boolean value. If it's true, we'll render an <ol>. Otherwise, it'll be a <ul>.

I think this is a perfectly valid approach. I opted to use the as prop in my solution because I wanted to teach a broadly-applicable pattern, something that can be used in many different situations. The ordered prop makes a lot of sense for this particular exercise, but it can only be used when there are exactly 2 valid options.

If your solution uses a boolean prop like this, I think that's great! You don't have to change anything. But I do hope you'll keep this as alternative in mind, since it's handy in all sorts of situations.

Customized heading levels

HTML gives us 6 different heading tags, <h1> through <h6>.

Some developers believe that you're supposed to pick the one based on the size of the text: <h1> for large headings, <h6> for small ones. But this isn't true. We can use CSS to make any heading tag any size. We should never pick HTML tags based on their aesthetics, we should pick them based on their semantics!

Instead, the goal with the heading tags is to organize the content as a hierarchy.

For example, consider this article from Wikipedia:

Screenshot of the George Mouzalon Wikipedia article

Imagine you were responsible for generating the "table of contents" for this page. You'd probably structure it something like this:

George Mouzalon
- Biography
  - Early life and service under Theodore II
  - Appointment as regent and assassination
- Treatment by Historians (not pictured, below the fold)

The page is all about “George Mouzalon”. But that page is split into a few chunks, like the biography, the treatment by historians...

And within those sections, we have subsections!

Documents tend to be hierarchical like this. In HTML, the heading levels are meant to represent this hierarchy.

Inspecting the HTML, we see that Wikipedia has chosen the following heading levels:

Screenshot of the George Mouzalon Wikipedia article, with boxes drawn around each section

Every page should have a single <h1> that covers the entire page (eg. the title of a blog post, the headline of a news article). Each section is labeled with <h2>, each sub-section with <h3>, each sub-sub-section with <h4>, etc.

This presents a bit of a challenge for us React developers.

For example: Suppose we have a component like this:

function SectionWithHeading({ heading, children, ...delegated }) {
  return (
    <section {...delegated}>
      <h2>{heading}</h2>
      {children}
    </section>
  );
}

This component bundles together a chunk of stuff with a heading. But it hardcodes an <h2> tag, which might not always be the right heading level!

Let's fix this code using polymorphism.

Acceptance Criteria:

Update the <SectionWithHeading> component so that it allows the consumer to specify the heading level.
In App.js, add a prop to each instance to set the heading level to the correct value.
When properly set, styles will be applied automatically to the heading tags, and the final result should look like this:

Screenshot of the final version, with Wikipedia-style headings

Note: Depending on your operating system, the serif headings might look a bit different. This is due to each operating system using a different default serif font.

Code Playground

import React from 'react';

function SectionWithHeading({ title, children }) {

return (

<h2>{title}</h2>

{children}

</section>

);

}

export default SectionWithHeading;

Solution:

Correction: In the solution, we throw an error when the level is less than 0. Given that <h0> is not a valid tag, it should actually throw when level is less than 1, not 0. This correction has been applied to the solution below:

Solution code (success)

// SectionWithHeading.js
import React from 'react';

function SectionWithHeading({
  level,
  title,
  children,
}) {
  if (
    typeof level !== 'number' ||
    level < 1 ||
    level > 6
  ) {
    throw new Error(
      `Unrecognized heading level: ${level}`
    );
  }

  const HeadingTag = `h${level}`;

  return (
    <section>
      <HeadingTag>{title}</HeadingTag>
      {children}
    </section>
  );
}

export default SectionWithHeading;

// App.js
import React from 'react';

import SectionWithHeading from './SectionWithHeading';

function App() {
  return (
    <SectionWithHeading
      level={1}
      title="George Mouzalon"
    >
      <p>
        George Mouzalon (Greek: Γεώργιος Μουζάλων,
        romanized: Geōrgios Mouzalōn; c. 1220 – 25
        August 1258) was a high official of the
        Empire of Nicaea under Theodore II Laskaris
        (r. 1254–1258).
      </p>
      <p>
        Of humble origin, he became Theodore's
        companion in childhood and was raised to
        high state office upon the latter's
        assumption of power. This caused great
        resentment from the aristocracy, which had
        monopolized high offices and opposed
        Theodore's policies. Shortly before
        Theodore's death in 1258, he was appointed
        regent of Theodore's under-age son John IV
        Laskaris (r. 1258–1261).
      </p>

      <SectionWithHeading
        level={2}
        title="Biography"
      >
        <SectionWithHeading
          level={3}
          title="Early life and service under Theodore II"
        >
          <p>
            The Mouzalon family is first attested in
            the 11th century, but produced few
            notable members until the mid-13th
            century, with exception of Nicholas IV
            Mouzalon, Patriarch of Constantinople in
            1147–1151.[1][2] George Mouzalon was
            born at Adramyttium on the western
            Anatolian coast in c. 1220.
          </p>
          <p>
            His family was considered as low-born,
            but he and his brothers became the
            childhood friends of the future Theodore
            II Laskaris, being raised with him in
            the palace as his paidopouloi
            (παιδόπουλοι, "pages"). It is assumed
            that they were also educated along with
            Theodore, sharing his classes under the
            scholar Nikephoros Blemmydes.[3][4][5]
            There were also at least two sisters,
            one of whom was later married to a
            member of the Hagiotheodorites
            family.[5]
          </p>
        </SectionWithHeading>
        <SectionWithHeading
          level={3}
          title="Appointment as regent and assassination"
        >
          <p>
            Shortly before Theodore II died on 16
            August 1258, he left George Mouzalon as
            regent and guardian of his
            eight-year-old son John IV. Patriarch
            Arsenios Autoreianos may have shared
            guardianship of John: although the later
            historians Nikephoros Gregoras and
            Makarios Melissenos say the Patriarch
            was named in this context, the
            contemporary historians George
            Pachymeres and George Akropolites name
            only Mouzalon.[16]
          </p>
          <p>
            This appointment further enraged the
            aristocracy, and Mouzalon's position
            became extremely precarious.[4][17][18]
            Mouzalon was also unpopular with the
            clergy because he was associated with
            Theodore's high-handed treatment of the
            Church, and with the people, who feared
            that he would try to usurp the throne.
          </p>
          <p>
            Most importantly, however, he faced the
            hostility of the army, in particular the
            Latin mercenaries, who had apparently
            been denied the usual stipends and
            donatives. In addition, they probably
            resented Theodore's intention to raise a
            "national" army composed solely of
            Byzantine Greeks, and Mouzalon is
            recorded by Pachymeres to have taken
            such measures.
          </p>
        </SectionWithHeading>
      </SectionWithHeading>
    </SectionWithHeading>
  );
}

export default App;